<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: YUI Loader Utility (beta): Using YUI Loader to Place Additional Components on a Page</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/yuiloader/yuiloader-beta-debug.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-beta-min.js"></script>


<!--begin custom header content for this example-->

<!--end custom header content for this example-->


</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em>
			<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>	
			<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
			</em>
		</p>
		<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label> 
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="fr" type="hidden" value="ush-myweb">
		<input id="ygsp" name="va" size="22"> 
		<input type="submit" value="Search" class="ygbt"></form>
	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" width="378" height="28"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: YUI Loader Utility (beta): Using YUI Loader to Place Additional Components on a Page</h1></div>
</div>
<div id="bd">	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">
	
	<div class="promo">
	<h1>YUI 加载器(beta)：使用 YUI 加载器放置其他组件到页面中</h1>
	
	<div class="exampleIntro">
	<p>在某些情况下，你可能希望使用 YUI 加载器去引入其他的组件到已经包含某些 YUI 内容的页面中。在这个例子中，我们将看看如何使用 YUI 加载器在已存在 YUI 内容的页面中为新组件引入依赖脚本。</p>

	<p>当前页面 &mdash; YUI 示例模板 &mdash; 使用了好几个 YUI 组件：为右上角的记录器控制台提供支持的 <a href="http://developer.yahoo.com/yui/logger/">Logger 控件</a> ，风格化我们的 "一点即发（call-to-action）" 按钮来打开新窗口或激活记录器的<a href="http://developer.yahoo.com/yui/button/">Button 控件</a> 等等。当你点击下方的示例板中的按钮时，YUI 加载器将被用来获取其他的组件：<a href="http://developer.yahoo.com/yui/tabview/">TabView 控件</a>，并且在示例板中构建一个标签集。 注意右侧的记录器控制器以观察当你按下按钮时产生的事件流。</p>
			
	</div>	
					
	<div class="example-container module ">
			<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== u-->
	
	<!--Container for our call-to-action button-->
<div id="tabInsertButtonContainer"></div>

<!--Container to which we'll append our TabView DOM-->
<div id="tabContainer"></div>

<script type="text/javascript">
//create our Button Instance which will trigger Loader to
//load TabView and create our Tabs.
YAHOO.example.buttoninit = function() {

	//Create the button instance:
	var oButton = new YAHOO.widget.Button({ 
		id: "tabInsertButton",  
		type: "button",  
		label: "点击此处加载 TabView",  
		container: "tabInsertButtonContainer"  
	});
	YAHOO.log("Button created; click button to begin loading TabView.", "info", "example");

	//Create a handler that handles the button click;
	//it logs the click, hides the button, then fires 
	//the function (loaderinit) that brings in TabView:
	var onButtonClick = function() {
		YAHOO.log("Button clicked; hiding button now and loading TabView", "info", "example");
		YAHOO.util.Dom.setStyle("tabInsertButtonContainer", "display", "none");
		YAHOO.example.loaderinit();
	}
	
	//attach the handler to the Button's click event:
	oButton.on("click", onButtonClick);
};

//Once the tabInsertButtonContainer element is on the page, we can create
//our button instance; in this case, the onContentReady deferral is unnecessary,
//because we're writing the element to the page before this script,
//but in many cases the onContentReady wrapper gives you added
//flexibility and it comes at low expense:
YAHOO.util.Event.onAvailable("tabInsertButtonContainer", 
								YAHOO.example.buttoninit);

//Here's the code that will set up our TabView instance.  We'll
//write this function and then tell Loader to fire it once it's done
//loading TabView into the page.
YAHOO.example.tabviewinit = function( ){
	
	//Simple "tabview from javascript" syntax; pass in an id for the
	//generated container element for the control, then add tabs one
	//at a time.
	var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
	
	tabView.addTab( new YAHOO.widget.Tab({
		label: 'lorem',
		content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>',
		active: true
	}));

	tabView.addTab( new YAHOO.widget.Tab({
		label: 'ipsum',
		content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
	}));
	
	tabView.addTab( new YAHOO.widget.Tab({
		label: 'dolor',
		content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
	}));
	
	//Having created our TabView control, we append it to the DOM:
	tabView.appendTo('tabContainer'); 
	
	//Success!  Log the completion of the process:
	YAHOO.log("TabView instance created and appended to the DOM.  The process is complete.", "info", "example");

};

YAHOO.example.loaderinit = function() {
	YAHOO.log("YAHOO.example.loaderinit firing; we'll bring in TabView and any missing dependencies now.", "info", "example");
	
	//Begin by creating a new Loader instance:
	var loader = new YAHOO.util.YUILoader();
	
	//configure Loader; we'll request TabView plus any
	//optional dependencies of TabView that aren't already on
	//the page:
	loader.require("tabview");
	loader.loadOptional = true;
	
	//We can now look at the components list that Loader has
	//calculated; this is what Loader has determined it needs
	//to add to the page:
	YAHOO.log("YUI components required: " + loader.sorted, "info", "example");
	
	//We'll specify files local to the current HTML page
	//so Loader does not load files from yui.yahooapis.com:
	loader.base = '../../build/';
	
	//When the loading is all complete, we want to initialize
	//our TabView process; we can set this here or pass this
	//in as an argument to the insert() method:
	loader.onLoadComplete = YAHOO.example.tabviewinit;
	
	//We've created and configured our Loader instance;
	//now we tell it to insert the needed components on the
	//page:
	loader.insert();
	
};
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">根据需要引入其他的 YUI 组件到页面中</h2>

<p>我们此处的任务是使用 <a href="http://developer.yahoo.com/yui/loader/">YUI 加载器</a> 去引入一个新的 YUI 组件 —— <a href="http://developer.yahoo.com/yui/tabview/">TabView 控件</a> —— 到已经加载了一些 YUI 内容的页面中（本例中是 <a href="http://developer.yahoo.com/yui/button/">Button 控件</a> 和 <a href="http://developer.yahoo.com/yui/logger/">Logger 控件</a>）。在你不时需要执行按需加载时，这个模式可能很有用 &mdash; 只在需要的组件被某个特定的用户行为促发时才去加载它们。</p>

<p>本例中所谓的“用户行为”将是点击一个　YUI Button 实例。该按钮一旦点击，将显示并被让位给我们动态构建的一个 TabView 实例。在我们构建它之前，我们必须加载 TabView 到页面中，而它在页面初始加载的时候没有被载入。</p>

<p>我们的标记很简单：一个按钮元素和一个我们创建 TabView 后放置它的DOM结构的容器元素：</p>

<textarea name="code" class="HTML" cols="60" rows="1"><!-- 触发器按钮的容器 -->
<div id="tabInsertButtonContainer"></div>

<!-- 我们将添加的 TabView 的 DOM 容器 -->
<div id="tabContainer"></div></textarea>

<p>接下来，我们实例化按钮。这个步骤包括(a)创建 Button 实例和(b)指派一个 click 事件处理程序，其逻辑是在点击按钮时执行加载 TabView 并创建一个 TabView 实例：</p>

<textarea name="code" class="JScript" cols="60" rows="1">
//创建将触发加载器去加载 TabView 并创建标签集的按钮。
YAHOO.example.buttoninit = function() {

	//创建按钮实例：
	var oButton = new YAHOO.widget.Button({ 
		id: "tabInsertButton",  
		type: "button",  
		label: "Click here to load TabView",  
		container: "tabInsertButtonContainer"  
	});
	YAHOO.log("Button created; click button to begin loading TabView.", "info", "example");

	//创建一个响应按钮点击的事件处理程序；
	//它记录点击，隐藏按钮，然后触发函数（loaderinit）去引入 TabView：
	var onButtonClick = function() {
		YAHOO.log("Button clicked; hiding button now and loading TabView", "info", "example");
		YAHOO.util.Dom.setStyle("tabInsertButtonContainer", "display", "none");
		YAHOO.example.loaderinit();
	}
	
	//绑定事件处理程序到按钮的 click 事件：
	oButton.on("click", onButtonClick);
};

//一旦 tabInsertButtonContainer 元素已经就位，我们就可以创建按钮实例了；
//本例中，使用 onContentReady 延迟不是必要的，因为我们在这个脚本前已经将该元素写入到页面中，
//但在很多情况下，onContentReady 封装器能增加灵活性，而且它消耗很低： 
YAHOO.util.Event.onContentReady("tabInsertButtonContainer", 
								YAHOO.example.buttoninit);</textarea>

<p>当按钮被点击时，我们首先需要使用 YUI 加载器引入 TabView 到页面中。我们已经封装该逻辑到 <code>YAHOO.example.loaderinit</code> 中，上面的代码中我们也已经绑定按钮的 click 事件。以下是带注释的 <code>loaderinit</code> 函数内容，它包括初始化加载器，配置它，然后用它的 insert 方法去引入 TabView 脚本及 CSS 依赖文件。<strong>注意：</strong>  在这个例子中，我们已经在页面初始加载的时候载入了 YUI加载器，所以在我们的脚本中可以使用它的功能。</p>

<textarea name="code" class="JScript" cols="60" rows="1">YAHOO.example.loaderinit = function() {
	YAHOO.log("YAHOO.example.loaderinit firing; we'll bring in TabView and any missing dependencies now.", "info", "example");
	
	//开始创建一个新的加载器实例：
	var loader = new YAHOO.util.YUILoader();
	
	//配置加载器；我们将请求 TabView 加上页面上还不存在的的所有可选依赖文件：
	loader.require("tabview");
	loader.loadOptional = true;
	
	//我们现在可以看到加载器已计算的组件列表；这是加载器判定需要加载到页面中的内容：
	YAHOO.log("YUI components required: " + loader.sorted, "info", "example");
	
	//我们要指定文件相对于当前HTML页面的本地路径，这样加载器就不会从 yui.yahooapis.com 加载文件。
	loader.base = '../../build/';
	
	//加载全部完成后，我们希望初始化 TabView；我们可以在此设置，也可以将其做为一个参数传递给 insert() 方法：
	loader.onLoadComplete = YAHOO.example.tabviewinit;
	
	//我们已经创建并配置好了加载器实例；现在我们通知它插入所需的组件到页面中：
	loader.insert();
	
};</textarea>

<p>我们已经配置加载器在完成加载 TabView 和它的依赖文件之后调用 <code>YAHOO.example.tabviewinit</code>。加载器会忠实地执行，等待每个请求的模块被加载，然后执行我们的代码去设置 TabView 实例。最后的一段代码看起来如下：</p>

<textarea name="code" class="JScript" cols="60" rows="1">
//这里是设置 TabView 实例的代码。我们将记录这个函数，同时告诉加载器在加载 TabView 到页面后触发它。
YAHOO.example.tabviewinit = function( ){
	
	//简单的 "tabview from javascript" 语法；传递一个将生成的控件容器元素的id，然后逐个添加 Tab。
	var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
	
	tabView.addTab( new YAHOO.widget.Tab({
		label: 'lorem',
		content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>',
		active: true
	}));

	tabView.addTab( new YAHOO.widget.Tab({
		label: 'ipsum',
		content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
	}));
	
	tabView.addTab( new YAHOO.widget.Tab({
		label: 'dolor',
		content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
	}));
	
	//创建 TabView 控件后，我们添加到 DOM 中：
	tabView.appendTo('tabContainer'); 
	
	//成功！记录完成过程：
	YAHOO.log("TabView instance created and appended to the DOM.  The process is complete.", "info", "example");

};</textarea>
				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI 记录器输出：</h3>
								<div id="loggerDiv"></div>
						</div>

					<div id="examples">
						<h3>YUI 加载器(beta) 示例：</h3>
	
						<div id="exampleToc">
							<ul>
								<li class='selected'><a href='../yuiloader/yl-basic.html'>使用 YUI 加载器去加载 Calendar 控件</a></li>
								<li><a href='../yuiloader/yl-insert.html'>使用 YUI 加载器放置其他组件到页面中</a></li>
								<li><a href='../yuiloader/yl-addmodule.html'>使用 YUI 加载器的 addModule 方法添加自定义（非YUI）内容</a></li>
							</ul>
						</div>
					</div>				

					<div id="module">
						<h3>更多 YUI 加载器(beta) 资源：</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/yuiloader/">用户指南</a> (外部链接)</li>
							<li><a href="../../docs/module_yuiloader.html">API 文档</a></li>
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/yuiloader.pdf">备忘表 (PDF)</a> (外部链接)</li>
						</ul>				
					</div>
					
	
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager (beta)</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button (beta)</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader (experimental)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="selected "><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test (beta)</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>

	<div id="ft">
        <p class="first">Copyright &copy; 2007 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
